// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';
import 'reactflow/dist/style.css';
import './App.css';


const nodeWithId = {
  id: 'unique - node - id - 1',
  type: 'default',
  data: { label: 'Node with ID' },
  position: { x: 100, y: 100 }
};

const customTypeNode = {
  id: 'custom - type - node - 1',
  type: 'custom - special',
  data: { label: 'Custom Type Node' },
  position: { x: 300, y: 100 }
};

const dataRichNode = {
  id: 'data - rich - node - 1',
  type: 'default',
  data: {
      label: 'Data - Rich Node',
      description: 'This node contains additional data',
      associatedData: { key: 'value' }
  },
  position: { x: 500, y: 100 }
};

const positionedNode = {
  id: 'positioned - node - 1',
  type: 'default',
  data: { label: 'Positioned Node' },
  position: { x: 50, y: 160 }
};

const styledNode = {
  id:'styled - node - 1',
  type: 'default',
  data: { label: 'Styled Node' },
  position: { x: 250, y: 160 },
  style: { background:'red', color: 'white' }
};

const classBasedStyledNode = {
  id: 'class - based - styled - node - 1',
  type: 'default',
  data: { label: 'Class - Based Styled Node' },
  position: { x: 450, y: 160 },
  className: 'custom-node-class'
};

const draggableNode = {
  id: 'draggable - node - 1',
  type: 'default',
  data: { label: 'Draggable Node' },
  position: { x: 650, y: 160 },
  draggable: true
};

const fixedNode = {
  id: 'fixed - node - 1',
  type: 'default',
  data: { label: 'Fixed Node' },
  position: { x: 100, y: 220 },
  draggable: false
};

const selectableNode = {
  id:'selectable - node - 1',
  type: 'default',
  data: { label: 'Selectable Node' },
  position: { x: 300, y: 220 },
  selectable: true
};

const clickableNode = {
  id: 'clickable - node - 1',
  type: 'default',
  data: { label: 'Clickable Node' },
  position: { x: 500, y: 220 },
  onClick: () => {
      alert('You clicked the node!');
  }
};

const initialNodes = [
  nodeWithId,
  customTypeNode,
  dataRichNode,
  positionedNode,
  styledNode,
  classBasedStyledNode,
  draggableNode,
  fixedNode,
  selectableNode,
  clickableNode
];

const initialEdges = [];
// const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );
  return (
    <div style={{ height: '500px' }}>
      <ReactFlow 
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView/>
    </div>
  );
}